import React from 'react';
import add from '../../assets/css/user/add.module.css'
import {Picker,Toast} from "antd-mobile";
import 'antd-mobile/lib/picker/style/css'
import {province} from '../../components/common/province'

const CustomChildren = props => (
    <div onClick={props.onClick}>
        <div style={{ display: 'flex', height: '45px', lineHeight: '45px',position:'relative',borderBottom:0 }}>
            <div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{props.children}</div>
            <div style={{ textAlign: 'right', color: '#000', marginRight: 15 }}>{props.extra}</div>
        </div>
    </div>
);

export default class AddComponent extends React.Component{
    constructor(){
        super();
        this.state={
            name:'',
            cellphone:'',
            province:'',
            city:'',
            area:'',
            address:'',
            isdefault:false,
            isDefaultNum:0
        }
    }
    goBack(){
        this.props.history.goBack()
    }
    addName(e){
        this.setState({name:e.target.value})
    }
    addTel(e){
        this.setState({cellphone:e.target.value})
    }
    addAddress(e){
        this.setState({address:e.target.value})
    }
    addDefault(){
        if(this.state.isdefault===false){
            this.setState({isdefault:true,isDefaultNum:1});
            console.log(true)
        }else {
            this.setState({isdefault:false,isDefaultNum:0});
            console.log(false)
        }
    }
    preservation(){
        if(this.state.name !== '' && this.state.cellphone !==''){
            const parmas=new URLSearchParams();
            parmas.append('uid',localStorage['uid']);
            parmas.append('name',this.state.name);
            parmas.append('cellphone',this.state.cellphone);
            parmas.append('province',this.state.province);
            parmas.append('city',this.state.city);
            parmas.append('area',this.state.area);
            parmas.append('address',this.state.address);
            parmas.append('isdefault',this.state.isDefaultNum);
            fetch('http://vueshop.glbuys.com/api/user/address/add?token=1ec949a15fb709370f',{
                method:'post',
                body:parmas
            }).then((res)=>res.json())
                .then(res=>{
                    if(res.code===200){
                        Toast.info("添加成功", 1);
                        this.goBack()
                    }else{
                        Toast.info("添加失败", 1);
                    }
                })
        }
    }

    render() {
        return(
            <div className={add.boxAdd}>
                <div>
                    <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                    <span>添加收货地址</span>
                </div>
                <ul className={add.boxUl}>
                    <li>
                        <span>收货人</span><input type="text" onChange={this.addName.bind(this)} placeholder='收货人姓名'/>
                    </li>
                    <li>
                        <span>联系方式</span><input type="text" onChange={this.addTel.bind(this)} placeholder='联系人手机号'/>
                    </li>
                    <li className={add.picker}>
                        <span>所在地区</span>
                        <Picker
                            extra="请选择所在地区"
                            data={province}
                            value={this.state.pickerValue}
                            onOk={e => {
                                this.setState({ pickerValue: e});
                                this.setState({ province: e[0]});
                                this.setState({ city: e[1]});
                                if (e[2]){
                                    this.setState({ area: e[2]});
                                } else {
                                    this.setState({ area: ''});
                                }
                            }}
                            onChange={e=>console.log(e)}
                            onDismiss={e => console.log('dismiss', e)}
                        >
                            <CustomChildren></CustomChildren>
                        </Picker>
                    </li>
                    <li>
                        <span>详细地址</span><input type="text" onChange={this.addAddress.bind(this)} placeholder='街道详细地址'/>
                    </li>
                    <li>
                        <span>设置为默认地址</span><input type="checkbox" className={add.boxCheck} defaultChecked={this.state.isdefault} onClick={this.addDefault.bind(this)}/>
                    </li>
                </ul>
                <button onClick={this.preservation.bind(this)}>保存</button>
            </div>
        )
    }
}